<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="ck" onclick="fn()"/>
		<hr />
		<div id="div">
			<input type="checkbox"/><br />
			<input type="checkbox" /><br />
			<input type="checkbox" /><br />
			<input type="checkbox" /><br />
			<input type="checkbox" />
		</div>

        <script type="text/javascript">
            /*
            3.使用js完成全选全不选案例

​	            1）给最上面的复选框绑定一个点击事件

​	            2）当一点击最上面的复选框的时候立刻获取下面所有的复选框

​	            3）遍历获取下面每个复选框

​	            4）将最上面复选框此时checked的值赋值给下面每个复选框
            */
            // 1.给最上面的复选框绑定一个点击事件
            // document.getElementById("ck").onclick=function(){
            //     // console.log(this.checked);

            //     // 2.获取div标签对象
            //     let div = document.getElementById("div");
            //     // 3.获取div标签对象的所有子标签对象也就是所有input标签对象数组
            //     let inputDivs=div.children;
            //     // 4.遍历数组
            //     for(let input of inputDivs){
            //         // 5.将最上面复选框此时checked的值赋值给下面每个复选框
            //         input.checked=this.checked;
            //     }
            // }
            function fn(){
                let  inputCell = document.getElementById("ck");
                let inputArr= document.getElementsByTagName("input");
                for(let input of inputArr){
                    input.checked=inputCell.checked;
                }
            }
        </script>
	</body>
</html>